<template>
  <el-form :inline="true" :model="search" class="demo-form-inline">
    <el-form-item label="名称">
      <el-input v-model="search.nickName"/>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="search.phone"/>
    </el-form-item>
    <el-form-item label="状态">
      <el-input v-model="search.status"/>
    </el-form-item>
    <el-form-item label="会员身份">
      <el-select
          v-model="search.vip"
          style="width: 180px"
      >
        <el-option
            v-for="item in vips"
            :key="item.id"
            :label="item.vip"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getStaffList">查询</el-button>
    </el-form-item>
  </el-form>

  <!--    <div class="add-div">-->
  <!--        <el-button type="primary" plain @click="add">新增</el-button>-->
  <!--    </div>-->
  <!-- table -->
  <el-table :data="userInfoList" style="width: 80%">
    <el-table-column prop="nickName" label="名称" width="100"/>
    <el-table-column prop="phone" label="手机号" width="120"/>
    <el-table-column prop="email" label="邮件地址" width="160"/>
    <el-table-column prop="authentication" label="认证状态" width="80" :formatter="authenticationFormatter"/>
    <el-table-column prop="inviteCode" label="邀请码" width="160"/>
    <el-table-column prop="vip" label="身份" width="80" :formatter="vipFormatter"/>
    <el-table-column prop="status" label="状态" width="80" :formatter="statusFormatter"/>
    <el-table-column prop="createTimeStr" label="注册时间" width="200"/>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="{ row }">
        <el-button :disabled="row.authentication !== 1" link type="primary" size="small" @click="authDialog(row)">认证
        </el-button>
<!--        <el-button link type="primary" size="small" @click="refund(row)">详情</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <div v-show="showPagination">
    <el-pagination :page-size="10" :pager-count="totalPage" layout="prev, pager, next" :total="totalCount"
                   @current-change="handlePageChange"/>
  </div>
  <!-- dialog -->
  <el-dialog width="30%" :modal="staffInfo" v-model="dialogDetailVisible">
    <el-form ref="formRef" label-width="100px">
      <el-form-item label="投资人">
        <el-input v-model="station.userName"></el-input>
      </el-form-item>
      <el-form-item label="站点名称">
        <el-input v-model="station.stationName"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="station.address"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="station.status"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="station.createTime"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="primary" @click="onSubmitDetail">提交</el-button> -->
        <el-button type="primary" @click="DetailClose">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog width="30%" :modal="station" v-model="dialogAuthVisible">
    <el-form ref="formRef" label-width="100px">
      <img :src="station.idCardFront" alt="身份证正面">
      <img :src="station.idCardBack" alt="身份证反面">
      <el-form-item label="是否通过">
        <el-select
            v-model="station.authentication"
            placeholder=""
            style="width: 180px"
        >
          <el-option
              v-for="item in authList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="auth">提交</el-button>
        <el-button type="primary" @click="closeAuth()">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {UserInfoList, AuthorizeUser} from '@/api/user/userinfo.js'

const showPagination = ref(false);
const totalCount = ref(0)
const totalPage = ref(0)
//定义一个数据模型
const station = ref({
  nickName: '',
  phone: '',
  email: '',
  authentication: '',
  balance: '',
  point: '',
  inviteCode: '',
  idCardFront: '',
  idCardBack: '',
  status: '',
  type: '',
  createTime: '',
  pageSize: 20
});


const authList = ref([{
  id: 0,
  name: '待上传'
},{
  id: 1,
  name: '待审核'
}, {
  id: 2,
  name: '通过'
}, {
  id: 3,
  name: '不通过'
}])

const search = ref({
  nickName: '',
  phone: '',
  email: '',
  authentication: '',
  status: '',
  vip: '',
  type: 0,
  pageSize: 20
})
const vips = ref([{
  id: 0,
  vip: '普通会员'
}, {
  id: 1,
  vip: 'VIP会员'
}])

// 定义一个list用来接收后端返回的数据列表
const userInfoList = ref([]);
//定义一个标识---是否需要展示dialog
const dialogDetailVisible = ref(false);
const dialogAuthVisible = ref(false);

GetUserInfoList();

function GetUserInfoList() {
  UserInfoList(search.value)
      .then(res => {
        console.info(res.data)
        if (res.data.code === 200000) {
          // hide();
          console.info(res.data.data);
          userInfoList.value = res.data.data.data
          if (res.data.data.totalCount > 0) {
            showPagination.value = true;
            totalPage.value = res.data.data.totalPage;
            totalCount.value = res.data.data.totalCount;
          }
        } else {
          //错误提示框
          ElMessage({
            message: res.data.msg,
            type: 'warning'
          });
        }
      })
}

function handlePageChange(newPage) {
  coupon.value.pageNum = newPage
  ListCoupon(coupon.value)
      .then(res => {
        if (res.data.code == 200000) {
          hide();
          console.info(res.data.data)
          couponList.value = res.data.data.data
          if (res.data.data.totalCount > 0) {
            showPagination.value = true;
            totalPage.value = res.data.data.totalPage;
            totalCount.value = res.data.data.totalCount;
          }
        } else {
          //错误提示框
          ElMessage({
            message: res.data.msg,
            type: 'warning'
          });
        }
      })
}

function authenticationFormatter(row, column, cellValue) {
  if (cellValue === 0) {
    return "待上传";
  } else if (cellValue === 1) {
    return "待审核";
  } if (cellValue === 2) {
    return "已认证";
  } {
    return "认证失败";
  }
}
function getAuthDesc(auth) {
   if (auth === 2) {
    return "认证通过";
  } {
    return "认证不通过";
  }
}

function statusFormatter(row, column, cellValue) {
  if (cellValue === 0) {
    return "正常";
  } else {
    return "已注销";
  }
}

function vipFormatter(row, column, cellValue) {
  if (cellValue === 0) {
    return "普通";
  } else {
    return "VIP";
  }
}

// 详情

function Detail(data) {
  station.value = {...data};
  dialogDetailVisible.value = true;
}

function DetailClose() {
  dialogDetailVisible.value = false;
}

function authDialog(data) {
  station.value = {...data};
  dialogAuthVisible.value = true;
}

const  authUser=ref({
  userId: '',
  authentication: ''
})
function auth() {
  authUser.value.userId = station.value.id;
  authUser.value.authentication = station.value.authentication;
  console.info(station.value.authentication);
  if(station.value.authentication === 0 || station.value.authentication === 1){
    ElMessage({
      message: '只能通过或不通过',
      type: 'warning'
    });
    return;
  }
  const msg=getAuthDesc(station.value.authentication);

  ElMessageBox.confirm(
      msg,
      '提醒', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    AuthorizeUser(authUser.value).then(res => {
      if (res.data.code === 200000) {
        closeAuth();
        ElMessage({
          message: '认证成功',
          type: 'success'
        });
        GetUserInfoList();
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'warning'
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '删除取消'
    })
  })
}

function closeAuth() {
  dialogAuthVisible.value = false;
  //清空表单数据
  Object.keys(station.value).forEach(key => {
    station.value[key] = '';
  });
}
</script>